<template>
  <el-container direction="vertical">

    <navMenu width="100%"></navMenu>

    <el-container direction="horizontal">
      <el-aside width="280px" height="100%">
        <sideBar class="menu" page-index="5-2" open-index="5" ></sideBar>
      </el-aside>
      <el-main>
        <!--搜索栏-->
        <el-container direction="horizontal">
          <el-input v-model="words.word" placeholder="请输入风险名称 （支持模糊查询）"></el-input>
          <el-button style="margin-left: 20px" @click="vague()">搜索</el-button>
          <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">添加</el-button>

          <!--新建抽屉-->
          <el-drawer
            title="新增风险点处置考评"
            :visible.sync="drawer"
            :direction="direction"
            ref="thisdrawer">

            <el-row :gutter="20">
              <el-col :span="7" :offset="2">选择风险点处置</el-col>
            </el-row>

            <!--风险点选择框-->
            <el-row :gutter="20" style="margin-top: 12px">
              <el-col :span="20" :offset="2">
                <template>
                  <el-select v-model="newCopeTest.risk_cope_id" clearable placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.risk_cope_id"
                      :label="item.risk_cope_id + ' ' + item.risk_id + ' ' + item.name"
                      :value="item.risk_cope_id">
                    </el-option>
                  </el-select>
                </template>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 30px">
              <el-col :span="6" :offset="2">处置操作</el-col>
            </el-row>

            <!--处置操作输入框-->
            <el-row :gutter="20" style="margin-top: 12px">
              <el-col :span="20" :offset="2" ><el-input v-model="newCopeTest.operation" placeholder="请输入处置操作" clearable ></el-input></el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 40px">
              <el-col :span="6" :offset="2">
                <el-button @click="addCopeRecord()" type="primary" style="width: 130%">确认提交</el-button></el-col>
            </el-row>
          </el-drawer>
        </el-container>

        <!--风险点处置列表-->
        <el-table
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          height="502"
          style="width: 100%; margin-top: 20px">


          <el-table-column
            prop="risk_cope_record_id"
            label="处置考评编号">
          </el-table-column>

          <el-table-column
            prop="time"
            label="处置考评时间" >
          </el-table-column>

          <el-table-column
            prop="risk_cope_id"
            label="处置编号" >
          </el-table-column>

          <el-table-column
            prop="risk_id"
            label="风险点编号">
          </el-table-column>

          <el-table-column
            prop="name"
            label="风险点名称">
          </el-table-column>

          <el-table-column
            prop="operation"
            label="处置操作">
          </el-table-column>

          <el-table-column
            prop="user_id"
            label="操作人员">
          </el-table-column>

          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="handlePass(scope.$index, scope.row)"
                type="primary">
                通过
              </el-button>
              <el-button
                size="small"
                @click="handleFail(scope.$index, scope.row)"
                type="danger">
                失败
              </el-button>
            </template>
          </el-table-column>

        </el-table>
        <!--角标-->
        <div style="text-align: center;margin-top: 20px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="current_change">
          </el-pagination>
        </div>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "copeTest",
  data() {
    return {
      words: {
        word: ''
      },
      tableData: [],
      total: 0,
      currentPage: 1,
      pagesize: 8,
      direction: 'rtl',
      drawer: false,
      newCopeTest:{
        risk_cope_id: '',
        operation: '',
      },
      options: [{
        risk_cope_id: '',
        risk_id: '',
        name:''
      }],
      options_2: [{
        user_id: ''
      }],
      updateStatus:{
        risk_cope_record_id: '',
        risk_cope_id: '',
        status: 0
      }
    }
  }, mounted() {
    //初始化表格
    this.$axios.get(`http://127.0.0.1:5000/riskCopeTest/init`).then((res) => {
      this.tableData = res.data;
      this.total = this.tableData.length;
      this.total = this.tableData.length;
      console.log("init")
    });
    //初始化抽屉的下拉选择框
    this.$axios.get(`http://127.0.0.1:5000/riskCopeTest/getRiskForTest`).then((res) => {
      console.log("getRiskForTest")
      console.log(res);
      this.options = res.data
    });
    this.$axios.get(`http://127.0.0.1:5000/riskCopeTest/getStaffForTest`).then((res) => {
      console.log("getRiskForTest")
      console.log(res);
      this.options_2 = res.data
    });
  },
  methods:{
    current_change: function(currentPage){
      this.currentPage = currentPage;
    }, async vague() {
      this.$axios.post(`http://127.0.0.1:5000/riskCopeTest/select`, this.words).then((res) => {
        console.log(res);
        if(res.data===0){
          this.$message('没有符合查询条件的结果');
        }
        else {
          this.tableData = res.data;
          this.total = this.tableData.length;
        }
      });
    }, addCopeRecord: function() {
      if (this.newCopeTest.risk_cope_id === '')
        this.$message('请选择风险点处置');
      else if(this.newCopeTest.operation === '')
        this.$message('请填写处置操作');
      else if(this.newCopeTest.user_id === '')
        this.$message('请选择处置人员');
      else
        this.$axios.post(`http://127.0.0.1:5000/riskCopeTest/addRiskCopeTest`, this.newCopeTest).then((res) => {
          console.log(res);
          this.st = res.data;

          if (this.st === 1) {
            this.$message('新增成功');
            this.$refs.thisdrawer.closeDrawer();
            window.location.reload();
          } else {
            this.$message('新增失败，风险点处置考评已存在！');
            this.$refs.thisdrawer.closeDrawer();
          }
          this.st = 2;

        });
    },async handlePass($index, row){
      this.updateStatus.risk_cope_record_id = row.risk_cope_record_id
      this.updateStatus.risk_cope_id = row.risk_cope_id
      this.updateStatus.status = 1
      this.$axios.post(`http://127.0.0.1:5000/riskCopeTest/updateStatusInRiskCope`, this.updateStatus).then((res) => {
        console.log(res);
        this.st = res.data;

        if (this.st===1) {
          this.$message('处置考评通过');
          window.location.reload();
        }
        else{
          this.$message('处置考评通过失败');
        }
        this.st.statu=2;
      });

    },async handleFail($index, row){
      this.updateStatus.risk_cope_record_id = row.risk_cope_record_id
      this.updateStatus.risk_cope_id = row.risk_cope_id
      this.updateStatus.status = 3
      this.$axios.post(`http://127.0.0.1:5000/riskCopeTest/delete`, this.updateStatus).then((res) => {
        console.log(res);
        this.st = res.data;
        if (this.st===1){
          this.$axios.post(`http://127.0.0.1:5000/riskCopeTest/updateStatusInRiskCope`, this.updateStatus).then((res) => {
            console.log(res);
            this.st = res.data;

            if (this.st===1) {
              this.$message('处置考评失败');
              window.location.reload();
            }
            else{
              this.$message('处置考评失败失败');
            }
            this.st.statu=2;
          });
          window.location.reload();}
        else{
          this.$message('处置考评失败失败');
        }

        this.st = 2;
      });
    },
    async handleDelete($index, row) {
      this.$axios.post(`http://127.0.0.1:5000/riskCopeTest/delete`, row.risk_cope_id).then((res) => {
        console.log(res);
        this.st = res.data;
        if (this.st===1){
          this.$message('删除成功');
          window.location.reload();}
        else{
          this.$message('删除失败');
        }

        this.st = 2;
      });
    },

  }

}
</script>

<style scoped>
.menu{
  width: 100%;
  float: left;
  height: 673px;
}
</style>
